{% extends "kjs/common/base_template.html" %}

{% block common_css %}
    {{ block.super }}
    <style type="text/css">

    </style>
{% endblock %}

{% block body %}
    <hr/>
    <div id="kjsuiTransformWindow_test">
        <div style="width:380px;height:310px;background-color:#fa8072;">a</div>
        <div style="width:380px;height:310px;background-color:#add8e6;">b</div>
        <div style="width:380px;height:310px;background-color:#7b68ee;">c</div>
    </div>
    <hr/>
{% endblock %}

{% block common_script %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}js/jquery/plugin/jqueryui/jquery-ui-1.9.2.custom.min.css"/>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery/plugin/jquery-ui-1.9.2.custom.min.js"></script>
    <script id="kjsui" type="text/javascript" src="{{ STATIC_URL }}js/jquery/plugin/kjsui/base.js"></script>
    <script type="text/javascript">
        var jquery = $, jQuery;
        (function($){
            $.fn.extend({
                kjsuiTransformWindowInitial:function(options){
                    var defaults = {
                        width:1020,
                        height:400,
                        skew:10,
                        rotates:[50, 30, 0  ],
                        preview:3
                    };
                    var opts = $.extend(defaults, options);
                    var preview = opts.rotates.length;
                    var divTemp = $("<div/>");
                    var transformWindow = $(this);
                    transformWindow.addClass("kjsuiTransformWindowContainer");
                    var transformWindowsSub = transformWindow.find("div");
                    var abstractWindow = divTemp.clone();
                    transformWindow.append(abstractWindow);
                    var subSize = transformWindowsSub.size();
                    var loops = 1;
                    if (subSize < (2 * preview + 1)) {
                        if (subSize == 1) {
                            loops = 2 * preview + 1;
                        } else {
                            loops = (parseInt((2 * preview + 1) / subSize) + 1);
                        }
                    }
                    for(var j=0; j<loops; j++) {
                        for(var i=0; i<transformWindowsSub.size(); i++) {
                            var sub = $(transformWindowsSub.get(i));
                            var addSub = sub.clone();
                            addSub.addClass("kjsuiTransformWindowSub");
                            var w = divTemp.clone();
                            w.append(addSub).addClass("kjsuiTransformWindow").addClass("kjsuiTransformWindowSize");
                            w.append($("<input type='hidden' name='kjsuiTransformWindowIndex'/>").val(i + 1000 * j));
                            addSub.text(i + 1000 * j);
                            abstractWindow.append(w);
                            if (j == loops - 1) {
                                sub.remove();
                            }
                        }
                    }
                    var marginPart = opts.width * Math.tan(Math.PI * 2 / 360 * opts.skew)/2;
                    var transFromWindows = transformWindow.find("div.kjsuiTransformWindow").sort(function(a, b){
                        a = $(a);
                        b = $(b);
                        var aIndex = parseInt(a.find("input[name='kjsuiTransformWindowIndex']").val());
                        var bIndex = parseInt(b.find("input[name='kjsuiTransformWindowIndex']").val());
                        return aIndex - bIndex;
                    });
                    transformWindow.find("div.kjsuiTransformWindow").css({
                        width:opts.width,
                        height:opts.height - marginPart,
                        position:"absolute",
                        display:"none"
                    });
                    var focus = $(transFromWindows.get(0));
                    focus.addClass("kjsuiTransformWindowFocus");
                    focus.css({
                        display:"block",
                        "z-index":99999,
                        "margin-top":(opts.height - focus.height())
                    });
                    var focusSub = focus.find("div.kjsuiTransformWindowSub");
                    focusSub.css({
                        "margin-left":(opts.width - focusSub.width()) / 2
                    });
                    var lefts = [];
                    var rights = [];
                    for (var m=1; m<=preview; m++) {
                        var rotate = opts.rotates[m - 1];
                        var rightIndex = transFromWindows.size() - m;
                        var left = $(transFromWindows.get(rightIndex));
                        var right = $(transFromWindows.get(m));
                        left.css({
                            "-webkit-transform":"rotateY(" + rotate +"deg) skewY(" + (0 - opts.skew) + "deg)",
                            display:"block",
                            "z-index":rightIndex
                        });
                        left.addClass("kjsuiTransformWindowLeft");
                        var rightSub = right.find("div.kjsuiTransformWindowSub");
                        right.css({
                            "-webkit-transform":"rotateY(" + rotate +"deg) skewY(" + (opts.skew) + "deg)",
                            display:"block",
                            "z-index":rightIndex
                        });
                        rightSub.css({
                            "margin-left":right.width() - rightSub.width()
                        });
                        right.addClass("kjsuiTransformWindowRight");
                    }
                    abstractWindow.css({
                        width:opts.width,
                        height:opts.height,
                        overflow:"hidden",
                        position:"absolute"
                    });
                    transformWindow.css({
                        width:opts.width,
                        height:opts.height
                    });
                    transformWindow.kjsuiTransformWindowAction();
                },
                kjsuiTransformWindowAction:function(options){
                    var defaults = {
                        skew:-10
                    };
                    var opts = $.extend(defaults, options);
                    var kjsuiTransformWindow = $(this);
                    kjsuiTransformWindow.find("div.kjsuiTransformWindowFocus").click(function(){
                        var focusWindow = $(this);
                        focusWindow.animate({
                            "margin-top":0
                        }, function(){
                            var focusWindow = $(this);
                            focusWindow.unbind("click");
                            focusWindow.css({
                                "-webkit-transform":"rotateY(" + 80 +"deg) skewY(" + opts.skew + "deg)"
                            });
                            focusWindow.append($("<input type='hidden' name='kjsuiTransformWindowRotate' value='80'/>"));
                            focusWindow.find("div.kjsuiTransformWindowSub").animate({
                                "margin-left":0
                            }, 500, function(){
                                focusWindow.kjsuiTransformWindowRotate({
                                    stopRotate:50,
                                    isHidden:false,
                                    speed:5,
                                    skew:-10,
                                    stop:function(target){
                                        focusWindow.removeClass("kjsuiTransformWindowFocus");
                                        focusWindow.addClass("kjsuiTransformWindowLeft");
                                    },
                                    hide:function(target){}
                                });
                            });

                        });
                    });
                },
                kjsuiTransformWindowRotate:function(options){
                    var defaults = {
                        stopRotate:30,
                        isHidden:false,
                        speed:5,
                        skew:10,
                        stop:function(target){},
                        hide:function(target){}
                    };
                    var opts = $.extend(defaults, options);
                    var win = $(this);
                    var startRotate = parseInt(win.find("input[name='kjsuiTransformWindowRotate']").val());
                    var i = 1;
                    var rotateInterval = window.setInterval(function(){
                        var nextRotate = startRotate - i * opts.speed;
                        if (nextRotate <= opts.stopRotate) {
                            nextRotate = opts.stopRotate;
                            window.clearInterval(rotateInterval);
                            win.find("input[name='kjsuiTransformWindowRotate']").val(opts.stopRotate);
                            opts.stop(win);
                            if (opts.isHidden) {
                                win.hide();
                                opts.hide(win);
                            }
                        }
                        win.css({
                            "-webkit-transform":"rotateY(" + nextRotate + "deg) skewY(" + opts.skew +"deg)"
                        });
                        i++;
                    }, 100);
                }
            });
        })(jquery);
        $(document).ready(function(){
            $("div#kjsuiTransformWindow_test").kjsuiTransformWindowInitial();
        });
    </script>


    <style type="text/css">
        div#eagleye_social_bind_widget {
            width:1024px;
            min-width:1024px;
            max-width:1024px;
            margin:0 auto;
            background:#f8f8ff;
        }
        div.eagleyePanel {
            width:50%;
            height:300px;
            min-height:300px;
        }
        div#eagleye_right_panel {
            float:right;
            overflow:hidden;
        }
        div.eagleyeUserPanel {
            text-align:center;
        }
        div.eagleyeUserPanel img {
            width:150px;
            height:150px;
            margin:20px;
        }
        div.eagleyeUserPanel label {
            font-size:24px;
        }

        /**
        更改账号类型的控件
        */
        div.changeBindAccountType {
            width:100px;
            height:600px;
            z-index:999;
        }
        div.changeBindAccountType:hover {
            cursor:pointer;
            background-color:#333333;
            opacity:0.5;
        }
        /**
        actionTitle
        */
        .actionTitleDiv {
            margin:0 auto;
            width:300px;
            height:50px;
            background-color:#00bfff;
            text-align:center;
            line-height:50px;
            color:white;
            font-weight:bold;
        }
        .actionTitle {
            background-color:#00bfff;
            padding:0 20px;
        }
        .showPanel {
            text-align:center;
        }

        button.bindBtn {
            width:180px;
            padding:10px 0;
            border:0 solid white;
            margin:0 10px;

        }
        button.bindBtn:hover {
            box-shadow:4px 4px 4px gray;
            cursor:pointer;
        }
        button.bindBtn:active {

        }

    </style>
    <div id="eagleye_social_bind_widget">
        <div style="position:absolute;width:1024px;z-index:9999;height:0;">
            <div style="float:left;" id="changeAccountToLeftBtn" class="changeBindAccountType"></div>
            <div style="float:right;" id="changeAccountToRightBtn" class="changeBindAccountType"></div>
            <div style="text-align:center;margin-top:300px;">
                <button class="bindBtn">立刻绑定</button>
                <button class="bindBtn">不需要绑定任何账号</button>
            </div>
        </div>
        <div class="actionTitleDiv">
            <label class="actionTitle"></label>
        </div>
        <div id="eagleye_right_panel" class="eagleyePanel">
            <div>
                <div class="eagleyeUserPanel showPanel">
                    <div>
                        <img src="{{ STATIC_URL }}rainbow/images/0/default.jpeg" />
                    </div>
                    <label>风歌小蚂蚁</label>
                    <input type="hidden" name="panelTitle" value="与登陆账户绑定"/>
                </div>
                <div class="showPanel">
                    <form action="" method="POST">
                        <div>
                            <label>电子邮件</label>
                            <input type="text"/>
                        </div>
                        <div>
                            <label>密码</label>
                            <input type="text"/>
                        </div>
                    </form>
                    <input type="hidden" name="panelTitle" value="与其他账户绑定"/>
                </div>
                <div class="showPanel">
                    <form action="" method="POST">
                        <div>
                            <label>电子邮件</label>
                            <input type="text"/>
                        </div>
                        <div>
                            <label>密码</label>
                            <input type="text"/>
                        </div>
                        <div>
                            <label>确认密码</label>
                            <input type="text"/>
                        </div>
                    </form>
                    <input type="hidden" name="panelTitle" value="与新的账户绑定"/>
                </div>
            </div>
        </div>
        <div id="eagleye_left_panel" class="eagleyePanel">
            <div class="eagleyeUserPanel">
                <div>
                    <img src="{{ STATIC_URL }}rainbow/images/0/default.jpeg" />
                </div>
                <label>风歌小蚂蚁@人人</label>
            </div>
        </div>

    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("div#eagleye_user_select_accordion").accordion();
            var eagleyeRightPanel = $("div#eagleye_right_panel");
            var showPanels = $("div.showPanel");
            showPanels.parent().css({
                width:eagleyeRightPanel.width(),
                height:eagleyeRightPanel.height(),
                position:"absolute",
                overflow:"hidden"
            });
            for (var i=0; i<showPanels.size(); i++) {
                var showPanel = $(showPanels.get(i));
                showPanel.css({
                    "margin-left":0 - eagleyeRightPanel.width() * i,
                    position:"absolute",
                    width:eagleyeRightPanel.width()
                });
                if (i == 0) {
                    $(".actionTitle").text(showPanel.find("input[name='panelTitle']").val());
                }
            }
            $("div#changeAccountToRightBtn").click(function(){
                var showPanels = $("div.showPanel");
                for (var i=0; i<showPanels.size(); i++) {
                    var showPanel = $(showPanels.get(i));
                    showPanel.animate({"margin-left":"+=" + showPanel.width()}, 600, function(){
                        var marginLeft = $(this).css("margin-left");
                        marginLeft = marginLeft.substring(0, marginLeft.indexOf("px"));
                        marginLeft = parseInt(marginLeft);
                        if (marginLeft > 0) {
                            $(this).css({
                                "margin-left":0 - (showPanels.size() - 1) * $(this).width()
                            });
                        } else if (marginLeft == 0) {
                            $(".actionTitle").text($(this).find("input[name='panelTitle']").val());
                        }
                    });
                }
            });
        });
    </script>
{% endblock %}